<template>
    <view class="gjl-view">
        <view class="header">
            <view class="header-img">
                <image :src="userInfo.avatarUrl" mode=""></image>
            </view>
            <view class="left-box">
                <view class="name">
                    {{userInfo.nickName || ''}}<text class="id">ID:000{{userInfo.memberId || ''}}</text>
                </view>
                <!-- <view class="bottom">
                    <view class="num">邀请码:{{1}}</view>
                    <view class="btn" @click="copy(1)">复制</view>
                </view> -->
            </view>
        </view>
        <view class="main">
            <view class="main-top">
                <view class="left box-li">
                    <view class="num">
                        {{PartnershipData.yongjin || 0}}
                    </view>
                    <view class="text">
                        佣金分成(元）
                    </view>
                    <view class="btn-box" @click="$routerTo({path:'/pagesMine/copartner/cash'})">
                        立即提现
                    </view>
                </view>
                <vlew class="line"></vlew>
                <view class="right box-li">
                    <view class="num">
                        {{PartnershipData.hehuoren || 0}}
                    </view>
                    <view class="text">
                        我的合伙人
                    </view>
                    <view class="btn-box" @click="$routerTo({path:'/pagesMine/copartner/my-copartner'})">
                        立即招募
                    </view>
                </view>
            </view>
            <view class="main-center">
                <view class="num-ul">
                    <view class="num-li" @click="$routerTo({path:'/pagesMine/copartner/same-month',query:{index:1}})">
                        <view class="title">
                            当月佣金(元）
                        </view>
                        <view class="num-center">
                            <view class="num">
                                {{PartnershipData.DYyongjin || 0}}
                            </view>
                            <text class="icon-arrow-right" />
                        </view>
                    </view>
                    <view class="num-li" @click="$routerTo({path:'/pagesMine/copartner/same-month',query:{index:2}})">
                        <view class="title">
                            当月扫码(人）
                        </view>
                        <view class="num-center">
                            <view class="num">
                                {{PartnershipData.DYsaoma || 0}}
                            </view>
                            <text class="icon-arrow-right" />
                        </view>
                    </view>
                    <view class="num-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/same-month',query:{index:3}})">
                        <view class="title">
                            当月订单(单）
                        </view>
                        <view class="num-center">
                            <view class="num">
                                {{PartnershipData.DYdingdan || 0}}
                            </view>
                            <text class="icon-arrow-right" />
                        </view>
                    </view>
                    <view class="num-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/same-month',query:{index:4}})">
                        <view class="title">
                            当月推广金额(元）
                        </view>
                        <view class="num-center">
                            <view class="num">
                                {{PartnershipData.DYtuiguang || 0}}
                            </view>
                            <text class="icon-arrow-right" />
                        </view>
                    </view>
                </view>
                <view class="bg-box" @click="$routerTo({path:'/pagesMine/copartner/reward',query:{index:3}})">
                    <image src="https://img.thumbrary.com/hehuoren-banner.jpg" mode=""></image>
                </view>
            </view>
            <view class="main-bottom">
                <view class="utils-box">
                    <view class="title">
                        我的工具
                    </view>
                    <view class="utils-ul">
                        <view class="utils-li" @click="$routerTo({path:'/pagesMine/copartner/rich-text',query:{type:1,index:1}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils1X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">合伙人规则</view>
                        </view>
                        <view class="utils-li" @click="$routerTo({path:'/pagesMine/copartner/rich-text',query:{type:1,index:2}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils2X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">结算规则</view>
                        </view>
                        <view class="utils-li" @click="$routerTo({path:'/pagesMine/copartner/rich-text',query:{type:1,index:3}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils3X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">推广指导群</view>
                        </view>
                        <view class="utils-li">
                            <button :plain="true" class="btn" open-type="contact" @contact="contactInfo">
                                <view class="img-box">
                                    <image src="https://img.thumbrary.com/hehuoren-utils4X.png" mode="aspectFit"></image>
                                </view>
                                <view class="text">我的客服</view>
                            </button>
                        </view>
                        <view class="utils-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/rich-text',query:{type:1,index:4}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils5X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">如何推广</view>
                        </view>
                        <view class="utils-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/commission'})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils6X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">佣金率</view>
                        </view>
                        <view class="utils-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/downLoad',query:{index:4}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils7X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">下载素材</view>
                        </view>
                        <view class="utils-li margin-top" @click="$routerTo({path:'/pagesMine/copartner/rich-text',query:{type:1,index:5}})">
                            <view class="img-box">
                                <image src="https://img.thumbrary.com/hehuoren-utils8X.png" mode="aspectFit"></image>
                            </view>
                            <view class="text">注意事项</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="slider-box" @click="$routerTo({path:'/pagesMine/copartner/downLoad2'})">
            <view class="text">
                立即<br>推广
            </view>
        </view>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        data() {
            return {
                PartnershipData: {}
            }
        },
        computed: {
            userInfo() {
                return this.$store.getters.userInfo
            }
        },
        onLoad(item) {
            if(!this.$store.getters.vipCardNum || !this.$store.getters.becomeShareAddTime){
                this.$routerTo({path:'/pagesMine/copartner/vip-power',query:{}})
                return
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 客服电话
            contactInfo(e) {

            },
            // 获取当月数据
            getData() {
                service.mineService.Partnership({
                    data: {},
                    success: res => {
                        this.PartnershipData = res.result
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            copy(str) {
                this.$utils.copyContent(str)
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        overflow: hidden;
        min-height: 100%;
        background: rgba(249, 249, 249, 1);

        .slider-box {
            position: fixed;
            bottom: 200rpx;
            right: 35rpx;
            height: 130rpx;
            width: 130rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 34rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            background: linear-gradient(180deg, rgba(254, 179, 57, 1) 0%, rgba(253, 220, 94, 1) 100%);
            border-radius: 50%;
        }

        .main-bottom {
            .utils-box {
                margin-top: 20rpx;
                padding: 40rpx 20rpx 88rpx;
                background: rgba(255, 255, 255, 1);
                border-radius: 10rpx;

                .title::after {
                    display: block;
                    content: "";
                    position: absolute;
                    height: 32rpx;
                    width: 4rpx;
                    background: rgba(43, 168, 252, 1);
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }

                .title {
                    position: relative;
                    padding-left: 24rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                }

                .utils-ul {
                    margin-top: 35rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .utils-li.margin-top {
                        margin-top: 40rpx;
                    }

                    .utils-li {
                        flex: 1 1 25%;
                        .btn{
                            width: 100%;
                            padding: 0;
                            border: none;
                            height: 100%;
                        }
                        .img-box {
                            margin: 0 auto;
                            width: 96rpx;
                            height: 96rpx;

                            image {
                                height: 100%;
                                width: 100%;
                            }
                        }

                        .text {
                            text-align: center;
                            margin-top: 20rpx;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(51, 51, 51, 1);
                        }
                    }
                }
            }
        }

        .main-center {
            margin-top: 20rpx;

            .bg-box {
                margin-top: 20rpx;
                background: rgba(220, 220, 220, 1);
                height: 180rpx;

                image {
                    height: 100%;
                    width: 100%;
                    border-radius: 10rpx;
                }
            }

            .num-ul {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;

                .num-li.margin-top {
                    margin-top: 20rpx;
                }

                .num-li {
                    background: rgba(255, 255, 255, 1);
                    border-radius: 10rpx;
                    box-sizing: border-box;
                    padding: 16rpx 20rpx 57rpx;
                    width: 335rpx;

                    .title::after {
                        display: block;
                        content: "";
                        position: absolute;
                        height: 32rpx;
                        width: 4rpx;
                        background: rgba(43, 168, 252, 1);
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    .title {
                        padding-left: 14rpx;
                        position: relative;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .num-center {
                        margin-top: 20rpx;
                        margin-left: 10rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .num {
                            font-size: 48rpx;
                            font-family: PingFang SC;
                            color: rgba(51, 51, 51, 1);
                        }

                        .icon-arrow-right {}
                    }
                }
            }
        }

        .main {
            margin: 20rpx 30rpx 185rpx;

            .main-top {
                padding: 39rpx 0 23rpx;
                border-radius: 10rpx;
                background: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;
                justify-content: space-around;

                .line {
                    width: 1px;
                    height: 143rpx;
                    background: rgba(229, 229, 229, 1);
                }

                .left {
                    .btn-box {
                        color: rgba(43, 168, 252, 1);
                        border: 1px solid rgba(43, 168, 252, 1);
                    }
                }

                .right {
                    .btn-box {
                        color: rgba(255, 255, 255, 1);
                        background: linear-gradient(110deg, rgba(252, 87, 98, 1) 0%, rgba(255, 180, 68, 1) 100%);
                        box-shadow: 0px 2px 3px rgba(255, 180, 68, 0.21);
                        border-radius: 29rpx;
                    }
                }

                .box-li {
                    text-align: center;

                    .num {
                        font-size: 48rpx;
                        font-weight: bold;
                        color: rgba(51, 51, 51, 1);
                    }

                    .text {
                        margin-top: 10rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                    }

                    .btn-box {
                        border-radius: 29rpx;
                        padding: 8rpx 42rpx;
                        margin-top: 24rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                    }
                }
            }
        }

        .header {
            display: flex;
            align-items: center;
            padding: 50rpx 30rpx 90rpx 30rpx;
            background: rgba(43, 168, 252, 1);
            border-radius: 10rpx;

            .header-img {
                height: 120rpx;
                width: 120rpx;

                image {
                    background: rgba(181, 181, 181, 1);
                    border: 1px solid rgba(255, 255, 255, 1);
                    border-radius: 50%;
                    height: 100%;
                    width: 100%;
                }
            }

            .left-box {
                margin-left: 20rpx;

                .name {
                    font-size: 32rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);

                    .id {
                        margin-left: 12rpx;
                        font-size: 28rpx;
                    }
                }

                .bottom {
                    margin-top: 11rpx;
                    display: flex;
                    align-items: flex-end;

                    .num {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    .btn {
                        margin-left: 22rpx;
                        padding: 0 16rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        border: 1px solid rgba(255, 255, 255, 1);
                        border-radius: 50px;
                    }
                }
            }
        }
    }
</style>
